<template>
  <div>
    <my-div class="bill">
    <head >
      <div slot="right">
        <div class="search-icon" @click="is_bottom_show">
            <image style="width:34px;height:34px;" src="root:img/home/search-icon@2x.png"></image>
           </div>
      </div>
    </head>
    <!-- <my-div class="wallet-wrapper">
      <div class="my-wraper">
        <my-text day_color="rgba(70,120,245,1)" night_color="rgba(184,111,36,1)" :text="$t('my.bill_manage')" class="city-name"></my-text>
       
      </div>
      <div class="city-label">
        <div style="width:325px;">
          <my-text :text="$t('wallet.may_use')" class="city-label-name"></my-text>
          <my-text :text="wallet.total" class="city-label-count"></my-text>
        </div>
        <div style="width:325px;">
          <text class="city-label-name">{{$t('wallet.lock_house')}}</text>
          <my-text :text="wallet.lock" class="city-label-count"></my-text>
        </div>
      </div>
    </my-div> -->
    <!-- <div class="grey"></div> -->
    <div class="bill-record">
        <div class="bill-label">
          <my-text day_color="rgba(70,120,245,1)" night_color="rgba(184,111,36,1)" :text="$t('my.bill_manage')" class="city-name"></my-text>
          <!-- <image style="width:34px;height:34px;" src="root:img/load.gif"></image> -->
        </div>
    </div>
    
  </my-div>
  <scroller class="scroller" @loadmore="get_trade_record" loadmoreoffset="20">
            <div class="item" v-for="(item,key) of current_bill" :key="key" @click="bill_detail(item)">
              <bill-card :data="item" ></bill-card>
            </div>
            <div v-if="!nomore && loading" class="loadingbox">
              <image class="loading" src="https://img.alicdn.com/tfs/TB1CWnby7yWBuNjy0FpXXassXXa-32-32.gif" />
            </div>
            <div class="nomore" >
              <text v-if="!loading&&current_bill.length<1" style="font-size:24px;color:rgba(154,156,164,1);">查无记录！</text>
              <text v-if="nomore && current_bill.length>0"  style="font-size:24px;color:rgba(154,156,164,1);">没有更多了！</text>
            </div>
    </scroller>  
  </div>
</template>
<style scoped>
.scroller{
  flex: 1;
  /* position: absolute;
  top: 0;
  left: 0;
  bottom: 0; */
}

.bill-label{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  margin-bottom:30px; 
}
.wallet-wrapper{
  width: 690px;
  margin-left: 30px;
}
.city-name{
  font-size: 48px;
  font-family: PingFang SC;
}
.city-label{
  display: flex;
  flex-direction: row;
  margin-top: 44px;
  margin-bottom: 30px;
}
.city-label-name{
  font-size: 24px;
  color: rgba(154,156,164,1);
}
.city-label-count{
  font-size: 36px;
   margin-top: 18px;
   color: rgba(60,71,98,1);
}
.grey{
  width:750px;
  height:30px;
}
.bill-record{
  padding-left: 30px;
  padding-right: 30px;
}
.scroller{
  padding-left: 30px;
  padding-right: 30px;
}
.loadingbox {
    align-items: center;
    padding: 20px;
    height: 80px;
  }
.loading {
    height: 40px;
    width: 40px;
  }
  .nomore{
    width: 750px;
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .search-icon{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: end;
  height: 48px;
}
</style>
<script>
import BillCard from '../../component/bill-card.vue'
export default {
  name: "",
  data() {
    return {
      bill:[],
      current_bill:[],
      pageNo:0,
      wallet:{},
      nomore:false,
      loading:false
    };
  },
  components: {BillCard},
  methods: {
    onLoad(param){
        this.wallet = param&&param.wallet || {name:'',companyName:''}
        this.get_trade_record()
    },
    get_trade_record(){
      if(this.nomore) return
      this.loading = true
      this.pageNo++
      this.$http.getSilent('wallet/listUserTrancInfoV2?accountId='+this.current_wallet.account_id+'&pageNum='+this.pageNo+'&pageSize=10&currency='+this.wallet.name,{},(res)=>{
        this.loading = false
        if(res.code === 0){
          this.current_bill = [...this.current_bill,...res.result]
          this.bill = [...this.bill,...res.result]

        }else{
          this.nomore = true
        }
      },()=>this.loading = false)
    },
    loadmore(){

    },
    is_bottom_show(){
      this.navigator.presentFull({url:'root:pages/wallet/search_wallet.js',animate:true},(p)=>{
        if(!p)return 
       this.wallet.name = p.name
       this.current_bill = this.bill.filter(v => v.currency === p.name)
      })
    },
    bill_detail(data){
      this.push('root:pages/wallet/turn_out_result.js',{result:{value:data.amount,name:data.currency,pay_in_username:data.pay_in_username,pay_in_account_id:data.to,pay_out_account_id:data.from,txHash:data.txHash,tradeTime:data.tradeTime}})
    }
  }
};
</script>
